<main>
  <section class="mb-4">
    <a href="/">
      <div class="icon-arrow-left">{{items.0.title}}</div>
    </a>
  </section>

  <section>
    <h1>{{items.0.title}}</h1>
    <div class="mb-4 text-sm">
      <time>{{items.0._microfeed.date_published_short}}</time>
      &middot;
      <a href="{{items.0._microfeed.json_url}}" target="_blank">json</a>
      &middot;
      <a href="{{items.0._microfeed.rss_url}}" target="_blank">rss</a>
    </div>

    <div>
      {{#items.0._microfeed.is_audio}}
      <div class="text-sm mb-4">
        Listen:
      </div>
      {{#items.0.attachments}}
      <audio controls preload="metadata" class="w-full">
        <source src="{{url}}" type="{{mime_type}}"/>
        Your browser does not support the audio element.
      </audio>
      {{/items.0.attachments}}
      {{/items.0._microfeed.is_audio}}

      {{#items.0._microfeed.is_video}}
      <div class="text-sm mb-4">
        Watch:
      </div>
      {{#items.0.attachments}}
      <video controls preload="metadata" class="w-full">
        <source src="{{url}}" type="{{mime_type}}"/>
        Your browser does not support the video element.
      </video>
      {{/items.0.attachments}}
      {{/items.0._microfeed.is_video}}

      {{#items.0._microfeed.is_document}}
      {{#items.0.attachments}}
      <a href="{{url}}" target="_blank" rel="noopener nofollow" class="font-bold text-lg">Download file &#8594;</a>
      {{/items.0.attachments}}
      {{/items.0._microfeed.is_document}}

      {{#items.0._microfeed.is_external_url}}
      {{#items.0.attachments}}
      <a href="{{url}}" target="_blank" rel="noopener nofollow" class="font-bold text-lg">View url &#8594;</a>
      {{/items.0.attachments}}
      {{/items.0._microfeed.is_external_url}}

      {{#items.0._microfeed.is_image}}
      {{#items.0.attachments}}
      <a href="{{url}}" target="_blank">
        <img src="{{url}}" width="80%" loading="lazy" />
      </a>
      {{/items.0.attachments}}
      {{/items.0._microfeed.is_image}}
    </div>
    <div>
      {{#_microfeed.subscribe_methods.length}}
      <div class="text-sm mt-4 mb-2">
        Subscribe:
      </div>
      {{/_microfeed.subscribe_methods.length}}
      <div class="flex flex-wrap">
        {{#_microfeed.subscribe_methods}}
        <a href="{{url}}" class="mr-4 mb-2">
          <div class="flex items-center">
            <img src="{{image}}" class="img-sm flex-none" alt="{{name}}" loading="lazy"/>
            <div class="flex-1 ml-1 text-sm hide-mobile">{{name}}</div>
          </div>
        </a>
        {{/_microfeed.subscribe_methods}}
      </div>
    </div>
  </section>

  <section>
    <h2 class="border-b">About</h2>
    <div>
      {{#items.0.image}}
      <div class="mb-4">
        <a href="{{items.0.image}}" target="_blank">
          <img src={{items.0.image}} width="250" height="250" loading="lazy"/>
        </a>
      </div>
      {{/items.0.image}}
      {{#items.0.content_html}}
      <div>{{{items.0.content_html}}}</div>
      {{/items.0.content_html}}
    </div>
  </section>
</main>
